<template>
  <dys-modal
    :open="open"
    :title="t('角色授权')"
    :width="1000"
    @cancel="emit('cancel')"
    :loading="loading"
    @ok="handleSubmit"
  >
    <a-row>
      <a-col :span="10">
        <a-card :title="t('角色信息')" size="small">
          <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-form-item :label="t('角色名称')">
              <a-input :value="model?.roleName" disabled></a-input>
            </a-form-item>
            <a-form-item :label="t('角色编码')">
              <a-input :value="model?.roleCode" disabled></a-input>
            </a-form-item>
            <a-form-item :label="t('访问组织')">
              <select-organization
                :value="model?.organizationIdList"
                organization-type="SCHOOL"
                multiple
                disabled
              ></select-organization>
            </a-form-item>
            <a-form-item :label="t('角色状态')">
              <a-switch
                :checked="model?.roleStatus"
                checked-value="Y"
                un-checked-value="N"
                :checked-children="t('有效')"
                :un-checked-children="t('无效')"
                disabled
              ></a-switch>
            </a-form-item>
            <a-form-item :label="t('角色描述')">
              <a-textarea
                :value="model?.roleDesc"
                :rows="2"
                disabled
              ></a-textarea>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
      <a-col :span="14">
        <a-card :title="t('授权')" size="small">
          <menu-tree :model="model" ref="treeRef"></menu-tree>
        </a-card>
      </a-col>
    </a-row>
  </dys-modal>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import { message } from "ant-design-vue";
import { updateRelation } from "@/api/system/role";
import type { QueryResult, RelationParams } from "@/api/system/role/typing";
import MenuTree from "./menu-tree.vue";
import SelectOrganization from "@/components/select-organization/index.vue";
interface Props {
  /**弹窗 */
  open: boolean;
  /**行数据 */
  model: QueryResult;
}
const props = defineProps<Props>();
const emit = defineEmits(["cancel"]);
const { t } = useI18n();

const treeRef = ref<InstanceType<typeof MenuTree>>();

const loading = ref(false);
const handleSubmit = async () => {
  const params: RelationParams = {
    roleId: props.model.roleId,
    relationIdList: [
      {
        checkType: "checked",
        keys: Array.from(treeRef.value.state.checkedSet),
      },
      {
        checkType: "halfChecked",
        keys: Array.from(treeRef.value.state.halfCheckedSet),
      },
    ],
  };
  loading.value = true;
  const { success } = await updateRelation(params);
  loading.value = false;
  if (success) {
    message.success(t("修改成功"));
    emit("cancel");
  }
};
</script>
